<!DOCTYPE HTML>
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<head>
</head>
<body>
<canvas id="myCanvas" width="600" height="300" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var context=c.getContext("2d");
/*
渐变
Context对象可以通过createLinearGradient()和createRadialGradient()两个方法创建渐变对象，这两个方法的原型如下：
Object createLinearGradient(x1, y1, x2, y2);
创建一个从(x1, y1)点到(x2, y2)点的线性渐变对象。
Object createRadialGradient(x1, y1, r1, x2, y2, r2);
创建一个从以(x1, y1)点为圆心、r1为半径的圆到以(x2, y2)点为圆心、r2为半径的圆的径向渐变对象。
渐变对象创建完成之后必须使用它的addColorStop()方法来添加颜色，该方法的原型如下：
void addColorStop(position, color);
其中position表示添加颜色的位置，取值范围为[0, 1]，0表示起点，1表示终点；color表示添加的颜色，取值可以是任何CSS颜色值。
渐变对象创建并配置完成之后就可以将其赋予Context对象的strokeStyle属性或者fillStyle属性，然后绘制的图形就具有了所需的渐变效果。
两种渐变效果的示例如下：
*/

     
var lGrd = context.createLinearGradient(0,0, 300, 300);    
lGrd.addColorStop(0, '#ff0000');    
lGrd.addColorStop(1, '#0000ff');    
context.fillStyle = lGrd;    
context.fillRect(0, 0, 300, 300);    
     
var rGrd =context.createRadialGradient(450, 150, 30, 450, 150, 150);    
rGrd.addColorStop(0, 'white');    
rGrd.addColorStop(1, 'black');    
context.fillStyle = rGrd;    
context.fillRect(300, 0, 300, 300);   
</script>
</body>
</html>